<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
      .player-container {
            background-image: linear-gradient(to bottom, #defbff, #aaffaa, #ffffaa, #ffffff); 
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
      .player-container h1 {
            margin-bottom: 20px;
        }
      .player-container h2 {
            margin-bottom: 1%;
            font-size: 13px;
        }
      .player-container select {
            margin-bottom: 20px;
            padding: 10px;
            width: 100%;
            max-width: 300px;
        }
      .disc {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid #000000;
            background: linear-gradient(to bottom, #ffffff, #ffffff);
            position: relative;
            overflow: hidden;
            margin: 20px auto;
        }
      .disc img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            animation: rotate 10s linear infinite paused;
        }
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
      .player-container audio {
            width: 100%;
            margin-top: 20px;
        }
        footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
      .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }
      .modal-content {
            background-color: #e5faf9;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #a3a3ff;
            width: 80%;
            max-width: 400px;
        }
      .close {
            color: #1e00ff;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
      .close:hover,
      .close:focus {
            color: rgb(253, 0, 0);
            text-decoration: none;
            cursor: pointer;
        }
        button {
            position: relative;
            bottom: 0;
            right: 0;    
            left: 40px;
            top: 240px;
            width: 175px;
            height: 40px;
            margin: 10px;
        }       
        unique-text {
            color: rgb(0, 183, 255);
            font-size: 25px;
        }
        history-text {
            color: red;
            font-size: 30px;
        }
        @font-face {
            font-family: 'FZKATJW';
            src: url('D:/MusicPlay/Fonts/FZKATJW.TTF');
        }
      .e3 {
            font-family: 'FZKATJW';
            font-size: 30px;
            margin-top: 20px;
        }
        /* 新增时间显示样式 */
      .time-display {
            margin-top: 10px;
            color: #666;
        }
        .secondary-btn {
            background-color: #ff4444; /* 次色按钮 */
            color: white;
        }
        .custom-btn {
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 鼠标样式 */
            font-size: 16px; /* 字体大小 */
            transition: background-color 0.3s; /* 过渡效果 */
        }
    </style>
</head>
<body>
    <div class="player-container">
        <p class="e3">音 乐 播 放 器 - 冬日暖阳</p>
        <h2>播放器版本：1.6.4 |  最近更新：2025.6.4</h2>
        <!-- 新增渐变选择菜单 -->
        <select id="gradientSelect" onchange="updateGradient()">
            <option value="linear-gradient(to bottom, #defbff, #aaffaa, #ffffaa, #ffffff)">梦幻</option>
            <option value="linear-gradient(to bottom, #E0FFFF,  #E0FFF0, #FEFFD4, #FFDED4)">幻想</option>
            <option value="linear-gradient(to top left, #0000ff, #00ffff, #ffff00, #ff0000)">炫彩</option>
            <option value="linear-gradient(to top left, #FFCBCB, #FFA2A2, #FF7B7B, #FF4D4D, #FF2020, #FF0000)">中国红</option>
            <option value="linear-gradient(to top left, #FF0000, #FF7474, #FFBCBC)">网易红</option>
            <option value="linear-gradient(to top left, #DEFFD7, #99FF85, #2AFF00)">自然绿</option>
            <option value="linear-gradient(to top left, #FF0097, #FF71CB, #FFCE9E)">可爱粉</option>
            <option value="linear-gradient(to top left, #000000, #9D9D9D, #FFFFFF)">低调灰</option>
            <option value="linear-gradient(to top left, #DFABFF, #FFD2BF, #FFBFE8)">落日晖</option>
            <option value="linear-gradient(to top left, #DFF9FF, #79DEFF, #00E1FF)">天际蓝</option>
            <option value="linear-gradient(to top left, #F2DBFF, #BC6BFF, #CD00FF)">活力紫</option>
            <option value="linear-gradient(to top left, #FFFDD1, #FFF974, #FFF400)">温柔黄</option>
            <option value="linear-gradient(to top left, #D6FFEE, #75FFD0, #00FFA5)">薄荷绿</option>
            <option value="linear-gradient(to top left, #FDFFA6, #FAFF43, #FAFF00)">柠檬黄</option>
            <option value="linear-gradient(to top left, #FFFFFF)">纯白色</option>
            <option value="linear-gradient(to top left, #00FFFF)">纯蓝色</option>
            <option value="linear-gradient(to top left, #FFFF93)">纯黄色</option>
            <option value="linear-gradient(to top left, #02F78E)">纯绿色</option>
            <option value="linear-gradient(to top left, #9F35FF)">纯紫色</option>
            <option value="linear-gradient(to top left, #FF0000)">纯红色</option>
            <option value="linear-gradient(to top left, #FF8040)">纯橙色</option>
        </select> 
        <select id="musicSelect" onchange="updateMusic()">
            <option value="D:/MusicPlay/Music/M6.wav" data-cover="D:/MusicPlay/Picture/P6.PNG">中国救护-无畏  刘瑾睿</option>
            <option value="D:/MusicPlay/Music/M15.wav" data-cover="D:/MusicPlay/Picture/P15.PNG">有爱就不怕  庄心妍</option>
            <option value="D:/MusicPlay/Music/M7.wav" data-cover="D:/MusicPlay/Picture/P7.PNG">浮光  周深</option>
            <option value="D:/MusicPlay/Music/M4.wav" data-cover="D:/MusicPlay/Picture/P4.PNG">此生不换  青鸟飞鱼</option>
            <option value="D:/MusicPlay/Music/M5.wav" data-cover="D:/MusicPlay/Picture/P5.PNG">我会等  承恒</option>
            <option value="D:/MusicPlay/Music/M3.wav" data-cover="D:/MusicPlay/Picture/P3.PNG">列车开往春天  就是南方凯</option>
            <option value="D:/MusicPlay/Music/M18.wav" data-cover="D:/MusicPlay/Picture/P18.PNG">冬眠  司南</option>
            <option value="D:/MusicPlay/Music/M17.wav" data-cover="D:/MusicPlay/Picture/P17.PNG">一荤一素  毛不易</option>
            <option value="D:/MusicPlay/Music/M2.mp3" data-cover="D:/MusicPlay/Picture/P2.PNG">天地龙鳞  王力宏</option>
            <option value="D:/MusicPlay/Music/M12.mp3" data-cover="D:/MusicPlay/Picture/P12.PNG">雪龙吟  张杰</option>
            <option value="D:/MusicPlay/Music/M14.wav" data-cover="D:/MusicPlay/Picture/P14.PNG">精卫  30年前，50年后</option>
            <option value="D:/MusicPlay/Music/M19.wav" data-cover="D:/MusicPlay/Picture/P19.PNG">踏浪  晚巧</option>
            <option value="D:/MusicPlay/Music/M20.wav" data-cover="D:/MusicPlay/Picture/P20.PNG">虫儿飞  晚巧</option>
            <option value="D:/MusicPlay/Music/M1.mp3" data-cover="D:/MusicPlay/Picture/P1.PNG">离别开出花  就是南方凯</option>      
            <option value="D:/MusicPlay/Music/M16.wav" data-cover="D:/MusicPlay/Picture/P16.PNG">我用什么把你留住  福禄寿</option>  
            <option value="D:/MusicPlay/Music/M11.mp3" data-cover="D:/MusicPlay/Picture/P11.PNG">星光就在前方  抠抠</option>                                                       
            <option value="D:/MusicPlay/Music/M8.mp3" data-cover="D:/MusicPlay/Picture/P8.PNG">烟火赴新年  咻咻满</option>
            <option value="D:/MusicPlay/Music/M9.mp3" data-cover="D:/MusicPlay/Picture/P9.PNG">加勒比海盗</option>
            <option value="D:/MusicPlay/Music/M10.mp3" data-cover="D:/MusicPlay/Picture/P10.PNG">当神兽遇见神兽  中央广播电视台</option>                      
            <option value="D:/MusicPlay/Music/M13.mp3" data-cover="D:/MusicPlay/Picture/P13.PNG">跑操音乐  陈军禄</option>
            <option value="D:/MusicPlay/Music/M21.wav" data-cover="D:/MusicPlay/Picture/P21.PNG">生死相随  崔子格</option>
            <option value="D:/MusicPlay/Music/M22.wav" data-cover="D:/MusicPlay/Picture/P22.PNG">年少的你啊  浩然</option>
            <option value="D:/MusicPlay/Music/M23.wav" data-cover="D:/MusicPlay/Picture/P23.PNG">可能  程响</option>
            <option value="D:/MusicPlay/Music/M24.wav" data-cover="D:/MusicPlay/Picture/P24.PNG">琵琶行  白居易</option>
            <option value="D:/MusicPlay/Music/M25.wav" data-cover="D:/MusicPlay/Picture/P25.PNG">凤凰花开的路口  林志炫</option>
            <option value="D:/MusicPlay/Music/M26.wav" data-cover="D:/MusicPlay/Picture/P26.PNG">如愿  王菲</option>
            <option value="D:/MusicPlay/Music/M27.wav" data-cover="D:/MusicPlay/Picture/P27.PNG">土坡上的狗尾巴草  卢润泽</option>
            <option value="D:/MusicPlay/Music/M28.wav" data-cover="D:/MusicPlay/Picture/P28.PNG">望  周深</option> 
            <option value="D:/MusicPlay/Music/M29.wav" data-cover="D:/MusicPlay/Picture/P29.PNG">小美满  周深</option>
            <option value="D:/MusicPlay/Music/M30.wav" data-cover="D:/MusicPlay/Picture/P30.PNG">纪念  雷雨欣</option>
            <option value="D:/MusicPlay/Music/M31.wav" data-cover="D:/MusicPlay/Picture/P31.PNG">一路生花  温奕心</option>
            <option value="D:/MusicPlay/Music/M32.wav" data-cover="D:/MusicPlay/Picture/P32.PNG">少年-建党百年  梦然</option>
            <option value="D:/MusicPlay/Music/M33.wav" data-cover="D:/MusicPlay/Picture/P33.PNG">少年  梦然</option>
            <option value="D:/MusicPlay/Music/M34.wav" data-cover="D:/MusicPlay/Picture/P34.PNG">着魔  张杰</option>                                                   
        </select>
        <div class="disc">
            <img id="discImg" src="D:/MusicPlay/Picture/P6.PNG" alt="唱片封面">
        </div>
        <audio id="audioPlayer" controls>
            <source src="D:/MusicPlay/Music/M6.wav" type="audio/mpeg">
            您的浏览器不支持音频元素。
        </audio>
        <!-- 新增显示时间的元素 -->
        <div class="time-display" id="timeDisplay"></div>
    </div>
    <script>
        function updateMusic() {
            var select = document.getElementById('musicSelect');
            var audioPlayer = document.getElementById('audioPlayer');
            var source = audioPlayer.getElementsByTagName('source')[0];
            source.src = select.value;
            audioPlayer.load();
            var selectedOption = select.options[select.selectedIndex];
            var coverPath = selectedOption.dataset.cover;
            var discImg = document.getElementById('discImg');
            discImg.src = coverPath;
        }
        function updateGradient() {
            var gradientSelect = document.getElementById('gradientSelect');
            var playerContainer = document.querySelector('.player-container');
            playerContainer.style.backgroundImage = gradientSelect.value;
        }
        var audioPlayer = document.getElementById('audioPlayer');
        var discImg = document.getElementById('discImg');
        audioPlayer.addEventListener('play', function() {
            discImg.style.animationPlayState = 'running';
        });
        audioPlayer.addEventListener('pause', function() {
            discImg.style.animationPlayState = 'paused';
        });
        // 新增显示当前时间的函数
        function displayCurrentTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0');
            const day = now.getDate().toString().padStart(2, '0');
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            const seconds = now.getSeconds().toString().padStart(2, '0');
            const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            document.getElementById('timeDisplay').textContent = `当前时间: ${timeString}`;
        }
        // 页面加载完成后调用显示时间函数
        window.addEventListener('load', function() {
            displayCurrentTime();
            // 每秒更新一次时间
            setInterval(displayCurrentTime, 1000);
        });
    </script>
<footer>
    <p>版权 © 2025 冬日暖阳. 个人所有</p>
    <a href="D:/MusicPlay/drny.html" style="color: #00ff99;">冬日暖阳个人资料</a>
    <a href="D:/MusicPlay/zc.html" style="color: #ff1d1d;">网站说明</a>
  </footer>
  <button onclick="openModal()">更新公告</button>
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <history-text>历史更新记录：</history-text>
        <unique-text>2025年6月2日更新内容：</unique-text>
        <p class="e2">1.新增曲目：着魔</p>
      </div>
    </div>
    <script>
      function openModal() {
        document.getElementById('myModal').style.display = 'block';
      }
      function closeModal() {
        document.getElementById('myModal').style.display = 'none';
      }
       function showMessage(text) {
            alert(text); // 弹出提示框
        }
    </script>
</body>
</html>